<template>
  <div class="container">
    <div class="content">
      <div class="targetContent">
        <draggable
          :list="data.resultContent"
          group="article"
          :disabled="data.disabled"
          @start="targetStart"
          @end="targetEnd"
          class="targetCard"
          style="height: 100px"
        >
          <div
            v-for="resultlist in data.resultlists"
            :key="resultlist.id"
            class="list-complete-item"
          >
            <div class="list-complete-item-handle">{{ resultlist.name }}</div>
          </div>
        </draggable>
      </div>
      <div class="optionsContent">
        <draggable
          :list="targetLists"
          :options="{
            group: { name: data.optionsName, pull: 'clone' },
            sort: false,
          }"
          filter=".undraggable"
          @end="optionEnd"
          class="dragArea"
        >
          <div
            v-for="targetList in data.targetLists"
            :key="targetList.id"
            :class="{ undraggable: targetList.flag }"
            class="list-complete-item"
          >
            <div class="list-complete-item-handle2">{{ targetList.name }}</div>
          </div>
        </draggable>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
// import draggable from "vuedraggable";
import { VueDraggableNext as draggable } from "vue-draggable-next";
import { reactive } from "vue";
const data = reactive({
  optionsName: "article",
  disabled: false,
  resultlists: [],
  targetLists: [
    { id: 1, name: "平板支撑" },
    { id: 2, name: "俄挺" },
    { id: 3, name: "空中自行车" },
    { id: 4, name: "波比" },
    { id: 5, name: "两头起摸脚" },
    { id: 6, name: "窄距俯卧撑" },
    { id: 7, name: "宽距俯卧撑" },
    { id: 8, name: "钻石俯卧撑" },
    { id: 9, name: "空中击掌俯卧称" },
    { id: 10, name: "深蹲提膝跳" },
  ],
});
// 右侧拖拽结束事件
const optionEnd = (ev: string) => {
  console.log(ev);
  // 如果拖拽目标区域和左侧区域的 name 一致，允许拖拽，并改变状态
  if (ev.to.className === "targetCard") {
    this.$set(data.targetLists[ev.oldIndex], "flag", true);
  }
};
// 左侧区域开始拖动事件（修改右侧区域的名字，不一致的话拖动失败）
const targetStart = () => {
  data.optionsName = "1111";
};
const targetEnd = () => {
  data.optionsName = "article";
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: rgba(5, 35, 56, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  .content {
    width: 1200px;
    height: 600px;
    background-color: #052338;
    // margin: 120px auto auto;
    display: flex;

    .targetContent {
      width: 100%;
      height: 100%;
    }

    .optionsContent {
      width: 100%;
      height: 100%;
      border-left: 2px solid #4ab7bd;
    }
  }
}
.list-complete-item {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  padding: 10px 18px;
  margin: 10px 8px 0;
  background: rgba(237, 245, 255, 0.1);
  border: 1px solid #bfcbd9;
  border-radius: 0.18rem;
  cursor: pointer;
  transition: all 1s;
}

.list-complete-item.sortable-chosen {
  background: #4ab7bd;
}

.list-complete-item.sortable-ghost {
  background: #30b08f;
}
.undraggable {
  background-color: rgb(143, 233, 233);
}

.list-complete-enter,
.list-complete-leave-active {
  opacity: 0;
}
</style>
